<template>
  <div class="record-container">
    <!-- 左侧二级导航 -->
    <ul class="nav-list">
      <p>基础数据管理</p>
      <li v-for="(item,index) in dataList" :key="index" @click="navRoute(item,index)">{{ item.name }}</li>
    </ul>

    <!-- 顶部二级tag -->
    <ul class="tag-list">
      <li v-for="(tag,index) in pushTagList" :key="index" :class="{active: isActive==index}" @click="actTag(index)">{{ tag.name }}<i class="el-icon-close" @click="closeTag(index)"/></li>
    </ul>

    <iframe :src="navLink" class="frame-window" frameborder="0">您的浏览器不支持，可更换为Chrome浏览器</iframe>
    <!-- <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageIndex" :limit.sync="listQuery.pageSize" @pagination="queryTable"/> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataList: [
        { name: '产品管理', link: 'http://www.baidu.com' },
        { name: '客户管理', link: 'http://www.w3school.com.cn' },
        { name: '供应商管理', link: 'http://mom.linking-master.com' },
        { name: '原材料管理', link: 'http://www.baidu.com' },
        { name: '收货地址管理', link: 'http://www.w3school.com.cn' },
        { name: '计量单位管理', link: 'http://mom.linking-master.com' },
        { name: '设备管理', link: 'http://www.baidu.com' },
        { name: '工艺管理', link: 'http://www.w3school.com.cn' },
        { name: '配件管理', link: 'http://mom.linking-master.com' }
      ],
      tagList: [],
      pushTagList: [],
      navLink: '',
      isActive: 0
    }
  },
  computed: {
  },
  mounted() {
    const default_item = this.dataList[0]
    this.pushTagList.push(default_item)
    this.navLink = this.pushTagList[0].link
  },
  created() {
  },
  methods: {
    // nav标签切换页面
    navRoute(x, i) {
      this.tagList.push(x)

      const arr = this.tagList
      const len = this.tagList.length

      const result = {}
      const finalResult = []
      for (let j = 0; j < len; j++) {
        result[arr[j].name] = arr[j]
        // 因为songs[j].name不能重复,达到去重效果,且这里必须知晓"name"或是其他键名
      }
      // 现在result内部都是不重复的对象了，只需要将其键值取出来转为数组即可
      for (const y in result) {
        finalResult.push(result[y])
      }
      console.log(finalResult)

      this.pushTagList = finalResult
      this.isActive = i
      this.navLink = this.pushTagList[i].link
    },
    // tag标签切换页面
    actTag(z) {
      this.isActive = z
      this.navLink = this.pushTagList[z].link
    },
    closeTag(n) {
      alert(n)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .record-container {
    height: 100%;

    .nav-list{
      width:180px;
      height:100%;
      position: fixed;
      left:0;
      background-color: #eaedf1;
      // padding-left:36px;
      font-size: 12px;

      p{
        font-weight: 800;
        background-color: #D9DEE4;
        margin: 0;
        height:70px;
        line-height: 70px;
        padding-left: 20px;
        padding-left: 60px;
      }

      li{
        padding-left: 35px;
        height:45px;
        line-height: 45px;
        cursor: pointer;
        color:#515151;
        padding-left: 60px;
      }

      li:hover{
        background-color: #f3f6f8;
         color: #777777;
      }
    }
    // 标签菜单
    .tag-list{
      width:100%;
      height:30px;
      line-height: 30px;
      background-color:#191c1f;
      position: fixed;
      left:180px;
      font-size:14px;

      li{
        display: inline-block;
        padding:0 15px;
        color:#ffffff;
        min-width: 65px;
      }

      li.active{
            color: #000;
            background: #e9edf1;
      }

      li i{
        margin-left: 8px;
      }

      li:hover{
        cursor: pointer;
        background-color:#ccc;
      }

      .el-icon-close:hover{
        background-color:#FF5722;
        border-radius:2px;
      }
    }

    .frame-window{
      margin-left:144px;
      margin-top:30px;
      width: calc(100% - 144px);
      height:calc(100% - 30px);
    }

  }
</style>
